<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 200px;  
      height: 100px; 
      padding: 20px;   
      border: 5px solid #333; 
      margin: 30px;    
      background-color: #f0f0f0;
    }
    .box-content {
      background-color: #ffd700; 
    }
    .size-tip {
      font-size: 12px;
      color: #666;
      margin: 0 30px;
    }
    .container {
      border: 1px dashed #666;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <span class="box-content">内容区（200x100px）</span>
    </div>
    <p class="size-tip">盒子总宽度 = 200px（width） + 20px×2（padding） + 5px×2（border） = 250px</p>
    <p class="size-tip">盒子总高度 = 100px（height） + 20px×2（padding） + 5px×2（border） = 150px</p>
  </div>
</body>
</html>